<template>
  <!-- 表单 -->
  <el-form ref="userform" :model="formData" :rules="rules" label-width="120px">
    <el-form-item label="姓名" prop="username">
      <el-input
        style="width: 50%"
        placeholder="请输入姓名"
        v-model="formData.username"
      />
    </el-form-item>
    <el-form-item label="手机" prop="mobile">
      <el-input
        style="width: 50%"
        placeholder="请输入手机号"
        v-model="formData.mobile"
      />
    </el-form-item>
    <el-form-item label="入职时间" prop="timeOfEntry">
      <el-date-picker
        style="width: 50%"
        placeholder="请选择入职时间"
        v-model="formData.timeOfEntry"
        value-format="yyyy-MM-dd"
      />
    </el-form-item>
    <el-form-item label="聘用形式" prop="formOfEmployment">
      <el-select
        style="width: 50%"
        placeholder="请选择"
        v-model="formData.formOfEmployment"
      >
        <el-option
          v-for="item in hireType"
          :key="item.id"
          :value="item.id"
          :label="item.value"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="工号" prop="workNumber">
      <el-input
        style="width: 50%"
        placeholder="请输入工号"
        v-model="formData.workNumber"
      />
    </el-form-item>
    <el-form-item label="部门" prop="departmentName">
      <el-input
        style="width: 50%"
        placeholder="请选择部门"
        v-model="formData.departmentName"
        @focus="hFocus"
      />
      <div class="tree-box" v-if="showTree">
        <el-tree
          :data="list"
          :props="{ label: 'name' }"
          @node-click="handleNodeClick"
        />
      </div>
    </el-form-item>
    <el-form-item label="转正时间">
      <el-date-picker
        style="width: 50%"
        placeholder="请选择转正时间"
        v-model="formData.correctionTime"
      />
    </el-form-item>
    <el-form-item>
      <el-button>取消</el-button>
      <el-button type="primary" @click="hSubmet">确定</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
// 导入部门负责人接口
import { getDepartment } from "@/api/department(企业接口)"
// 导入添加员工接口
import { addEmployee } from "@/api/employees(员工)"
// 导入枚举文件
import employeesEnum from '@/constant(枚举)/employees(员工的聘用方式)'
// 导入平面数据转树形数据
import { transListToTerrList } from '@/utils/index(自定义功能函数).js'
export default {
  // (1) 数据
  data () {
    return {
      //(1)表单数据
      formData: {
        username: '',         // 用户名
        mobile: '',           // 手机号
        formOfEmployment: '', // 聘用形式
        workNumber: '',       // 工号
        departmentName: '',   // 部门
        timeOfEntry: '',      // 入职时间
        correctionTime: ''    // 转正时间
      },
      //(2)验证规则
      rules: {
        username: [
          { required: true, message: '用户姓名不能为空', trigger: 'blur' },
          { min: 1, max: 4, message: '用户姓名为1-4位', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        formOfEmployment: [
          { required: true, message: '聘用形式不能为空', trigger: 'blur' }
        ],
        workNumber: [
          { required: true, message: '工号不能为空', trigger: 'blur' }
        ],
        departmentName: [
          { required: true, message: '部门不能为空', trigger: 'change' }
        ],
        timeOfEntry: [
          { required: true, message: '请选择入职时间', trigger: 'blur' }
        ]
      },
      //(3)员工的聘任方式
      hireType: employeesEnum.hireType,
      //(4)部门列表
      list: [],
      //(5)控制部门列表是否显示
      showTree: false
    }
  },
  // (2) 事件
  methods: {
    // 1.表单的兜底校验
    hSubmet () {
      this.$refs.userform.validate(async (valid) => {
        if (valid) {
          // 发送请求
          await this.loadEmployee()
          // 关闭弹层
          this.$emit('success')
        }
      })
    },
    // 2.获取部门负责人
    async loadDepartment () {
      let res = await getDepartment()
      this.list = transListToTerrList(res.data.depts.filter(item => item.pid != -1))
    },
    // 3.控制部门列表是否显示
    hFocus () {
      // (1)显示
      this.showTree = true
      // (2)执行部门列表函数
      this.loadDepartment()
    },
    // 4.获取tree里面的值
    handleNodeClick (data) {
      //(1)判断该对象中是否有子集
      if (data.children.length > 0) return
      //(2)没有子集就赋值给表单
      this.formData.departmentName = data.name
      //(3)关闭tree组件
      this.showTree = false
    },
    // 5.发送添加请求
    async loadEmployee () {
      try {
        let res = await addEmployee(this.formData)
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    // 6.重制表单
    resetForm () {
      // (1) 清空校验规则
      this.$refs.userform.resetFields()
      // (2) 手动清空表单
      this.formData = {
        username: '',         // 用户名
        mobile: '',           // 手机号
        formOfEmployment: '', // 聘用形式
        workNumber: '',       // 工号
        departmentName: '',   // 部门
        timeOfEntry: '',      // 入职时间
        correctionTime: ''    // 转正时间
      }
    }
  },
  // (3) 页面加载就执行
  created () {
  }
}
</script>